@attribute [Route(PageUrls.OfflineTodo)]
@attribute [Route("{culture?}" + PageUrls.OfflineTodo)]
@attribute [Authorize(Policy = AuthPolicies.PRIVILEGED_ACCESS)]
@attribute [Authorize(Policy = AppFeatures.Todo.ManageTodo)]
@inherits AppPageBase

<AppPageData Title="@Localizer[nameof(AppStrings.OfflineTodoTitle)]"
             PageTitle="@Localizer[nameof(AppStrings.OfflineTodoTitle)]" />

<section>
    <BitStack Class="stack">
        <BitStack Horizontal AutoHeight>
            <BitTextField @ref="newTodoInput"
                          Style="flex-grow:1"
                          @bind-Value="newTodoTitle"
                          Immediate DebounceTime="300"
                          Placeholder="@Localizer[nameof(AppStrings.TodoAddPlaceholder)]"
                          OnEnter="WrapHandled(async (KeyboardEventArgs args) => await AddTodoItem())" />

            <BitButton AutoLoading
                       OnClick="WrapHandled(AddTodoItem)"
                       Title="@Localizer[nameof(AppStrings.Add)]"
                       IsEnabled="(string.IsNullOrWhiteSpace(newTodoTitle) is false)">
                @Localizer[nameof(AppStrings.Add)]
            </BitButton>
        </BitStack>

        <BitStack Gap="0.25rem">
            <BitStack Horizontal VerticalAlign="BitAlignment.End" Gap="0.25rem" AutoHeight Class="todo-header">
                <BitPivot SelectedKey="@selectedFilter" SelectedKeyChanged="FilterTodoItems" HeaderOnly>
                    <BitPivotItem Key="@nameof(AppStrings.All)" HeaderText="@Localizer[nameof(AppStrings.All)]" />
                    <BitPivotItem Key="@nameof(AppStrings.Active)" HeaderText="@Localizer[nameof(AppStrings.Active)]" />
                    <BitPivotItem Key="@nameof(AppStrings.Completed)" HeaderText="@Localizer[nameof(AppStrings.Completed)]" />
                </BitPivot>
                <BitSpacer />
                <BitSearchBox @ref="searchBox"
                              NoBorder
                              Class="todo-search"
                              OnChange="SearchTodoItems"
                              Immediate DebounceTime="300"
                              Accent="BitColorKind.Secondary"
                              OnClear="@(() => SearchTodoItems(""))"
                              Placeholder="@Localizer[nameof(AppStrings.TodoSearchPlaceholder)]" />
                <BitStack Class="todo-sort" Gap="2px" Horizontal AutoSize>
                    <BitDropdown NoBorder FitWidth
                                 DefaultValue="nameof(AppStrings.Alphabetical)"
                                 TItem="BitDropdownOption<string>" TValue="string"
                                 OnSelectItem="(BitDropdownOption<string> item) => SortTodoItems(item.Value)"
                                 Styles="@(new() { Container="height:32px;background-color:var(--bit-clr-bg-sec)" })">
                        <Options>
                            <BitDropdownOption Text="@Localizer[nameof(AppStrings.Alphabetical)]" Value="nameof(AppStrings.Alphabetical)" />
                            <BitDropdownOption Text="@Localizer[nameof(AppStrings.Date)]" Value="nameof(AppStrings.Date)" />
                        </Options>
                        <CaretDownTemplate>
                            <BitIcon IconName="@BitIconName.Breadcrumb" />
                        </CaretDownTemplate>
                    </BitDropdown>
                    <BitButton IconOnly Color="BitColor.SecondaryBackground" Style="height:32px;"
                               OnClick="() => { isDescendingSort = !isDescendingSort; FilterViewTodoItems(); }"
                               IconName="@(isDescendingSort ? BitIconName.SortDown : BitIconName.SortUp)" />
                </BitStack>
            </BitStack>

            @if (isLoading)
            {
                <BitStack Alignment="BitAlignment.Center">
                    <BitRingLoading />
                </BitStack>
            }
            else
            {
                <BitPullToRefresh OnRefresh="async() => await LoadTodoItems(false)" ScrollerSelector=".todo-list" Style="width:100%">
                    <BitBasicList Items="viewTodoItems" EnableVirtualization Class="todo-list">
                        <EmptyContent>
                            <BitStack Alignment="BitAlignment.Center" Style="padding:1rem;">
                                <BitImage Src="/_content/Boilerplate.Client.Core/images/backgrounds/empty-todo-list-bg.svg" />
                                <BitLabel>@Localizer[nameof(AppStrings.NoTodos)]</BitLabel>
                            </BitStack>
                        </EmptyContent>
                        <RowTemplate Context="todo">
                            <BitStack Alignment="BitAlignment.Center" Style="padding:1rem 1rem 0" AutoHeight>
                                <BitStack Horizontal @key=@todo.Id VerticalAlign="BitAlignment.Center">
                                    @if (todo.IsInEditMode is false)
                                    {
                                        <BitStack Grows Gap="0">
                                            <BitCheckbox Label="@todo.Title"
                                                         Styles="@(new() { Label = todo.IsDone ? "text-decoration:line-through" : "" })"
                                                         @bind-Value="todo.IsDone"
                                                         OnChange="WrapHandled(async () => await UpdateTodoItem(todo))" />
                                            <BitText Typography="BitTypography.Body2">@todo.UpdatedAt!.Value.ToLocalTime().ToString("F")</BitText>
                                        </BitStack>

                                        <BitStack Horizontal AutoWidth Gap="0.5rem">
                                            <BitButton Variant="BitVariant.Text"
                                                       IconName="@BitIconName.Edit"
                                                       Color="BitColor.SecondaryForeground"
                                                       Title="@Localizer[nameof(AppStrings.Edit)]"
                                                       OnClick="WrapHandled(() => EnterEditMode(todo))" />

                                            <BitButton Color="BitColor.Error"
                                                       Variant="BitVariant.Text"
                                                       IconName="@BitIconName.Delete"
                                                       Title="@Localizer[nameof(AppStrings.Remove)]"
                                                       OnClick="WrapHandled(() => { isDeleteDialogOpen = true; deletingTodoItem = todo; })" />
                                        </BitStack>
                                    }
                                    else
                                    {
                                        <BitTextField Style="flex-grow:1" @bind-Value="underEditTodoItemTitle" />

                                        <BitButton Color="BitColor.TertiaryBackground"
                                                   Title="@Localizer[nameof(AppStrings.Cancel)]"
                                                   OnClick="WrapHandled(() => ExitEditMode(todo))">
                                            @Localizer[nameof(AppStrings.Cancel)]
                                        </BitButton>
                                        <BitButton Title="@Localizer[nameof(AppStrings.Edit)]" OnClick="WrapHandled(() => SaveTodoItem(todo))">
                                            @Localizer[nameof(AppStrings.Save)]
                                        </BitButton>
                                    }
                                </BitStack>
                                <BitSeparator Border="BitColorKind.Tertiary" />
                            </BitStack>
                        </RowTemplate>
                    </BitBasicList>
                </BitPullToRefresh>
            }
        </BitStack>
    </BitStack>
</section>

<BitDialog OnOk="WrapHandled(DeleteTodoItem)"
           @bind-IsOpen="isDeleteDialogOpen"
           OkText="@Localizer[nameof(AppStrings.Yes)]"
           CancelText="@Localizer[nameof(AppStrings.No)]"
           Title="@Localizer[nameof(AppStrings.DeleteTodoItem)]"
           Message="@Localizer.GetString(nameof(AppStrings.AreYouSureWannaDelete), deletingTodoItem?.Title ?? "")" />